import React from 'react';
import ReactDOM from 'react-dom';
import '../../static/tero/base.css'
import '../../static/app.css'
import { DatePicker } from 'antd';
import $ from 'jquery'

import Table from '../tero/table.jsx'
import u from '../../common.js'
const { RangePicker } = DatePicker;




class DataStudy extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          index:0,
          display:'none',
          operation:['导出','删除'],
          flag:true,
          type:0,
          startTime:'',
          endTime:'',
          dataStudy:true,
          status:true
        }
    }
    componentDidMount(){
      var that = this;
      $('.app-top-ullist').find('li:last-child').siblings().click(function(){
        that.setState({
          flag:true
        })
      })
    }
    onChangeDate(moment, string) {
      this.setState((prevState, props) => ({
        startTime: string[0],
        endTime: string[1]
      }))
    }
    onOkDate() {
      this.refs.tabledate.tableData(1, u.substrTime(this.state.startTime,'start'), u.substrTime(this.state.endTime,'end')) 
    } 
    render() {
        return (
            <div className='app'>
           
            <div className="app-header  app-headers">
              <div className="app-top  app-son">
              <ul>
                  <li>类型：</li>
                  <li>全部</li>
                  <li>案件</li>
                  <li>舆情</li>
                  <li>情报</li>
                </ul>
                <ul className='app-top-ullist'>
                  <li>时间：</li>
                  <li>今日</li>
                  <li>昨日</li>
                  <li>近三日</li>
                  <li>近七日</li>
                  <li className={this.state.flag?'':'activve'} onClick={()=>{
                this.setState({
                  flag:false
                })
              }}>{this.state.flag?'自定义':<RangePicker
              showTime={{ format: 'HH:mm' }}
              format="YYYY-MM-DD HH:mm"
              placeholder={['Start Time', 'End Time']}
              onChange={this.onChangeDate.bind(this)}
              onOk={this.onOkDate.bind(this)}
            />}</li>
                </ul>
              </div>
            </div>
            <div className='app-conter'>
            <Table operation={this.state.operation} type={this.state.type} ref='tabledate' dataStudy={this.state.dataStudy} status={this.state.status}/>
            </div>
          </div>
           
        )
    }
}




export default DataStudy